<template>
    <div class="quantity_box">
        <div class="num_box">
            <div class="text_t">累计发放金额</div>
            <div class="text_num">{{ onReplace(state.total_red_amount) }}</div>
        </div>
        <div class="num_box">
            <div class="text_t">累计发放红包个数</div>
            <div class="text_num">{{ onReplace(state.total_red_num) }}</div>
        </div>
        <div class="num_box">
            <div class="text_t">今日发放金额</div>
            <div class="text_num">{{ onReplace(state.today_red_amount) }}</div>
        </div>
        <div class="num_box">
            <div class="text_t">今日发放红包个数</div>
            <div class="text_num">{{ onReplace(state.today_red_num) }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineExpose, ref } from 'vue';
const state = ref({
    total_red_amount: 0,
    total_red_num: 0,
    total_partake_num: 0,
    today_red_amount: 0,
    today_red_num: 0
});
const onReplace = (num: number) => `${num}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
const getState = (val: any) => {
    state.value = val;
};
defineExpose({
    getState
});
</script>

<style lang="scss" scoped>
.quantity_box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 32px 24px;
    margin-bottom: 16px;
    background: #fff;

    // box-shadow: 0px 4px 4px 0px rgba(240, 240, 240, 0.5);
    border: 1px solid #eaeaea;
    font-size: 14px;
    color: #33302d;

    .boder {
        width: 1px;

        // height: 104px;
        background: #f0f0f0;
        border-radius: 1px;
    }

    .num_box {
        text-align: left;

        .text_t {
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #666;
            line-height: 20px;
        }

        .text_num {
            padding-top: 8px;
            font-size: 30px;
            font-family: HelveticaNeue-Medium, HelveticaNeue;
            font-weight: 500;
            color: #33302d;
            line-height: 36px;
        }
    }
}
</style>
